JavaScriptを利用して簡易棒グラフを描く
今回は、JavaScriptを利用して簡単な棒グラフを描く方法を紹介します。HTMLで集計結果などを表示する場合は表（TABLE）を使うのが一般的ですが、これをグラフ化すると一層わかりやすく表示できます。ここでは、■の文字を使って簡易棒グラフを描く方法を紹介してみましょう。

→ 見出し＆数値の配列を準備する
 
まずは、グラフを表示する位置にJavaScriptを挿入し、グラフの基となるデータを配列で指定します。変数「max」は項目の数で、midashi[?]とdata[?]に各項目の“見出し”と“数値”を指定していきます。実際にグラフを作成する際は、この部分の文字列や数値を変更するだけでグラフを作成できます。
<SCRIPT language="JavaScript">
<!--
max = 5;
midashi = new Array(max);
data = new Array(max);
midashi[1] = "大変よい";
midashi[2] = "よい";
midashi[3] = "ふつう";
midashi[4] = "悪い";
midashi[5] = "とても悪い";
data[1] = 16;
data[2] = 23;
data[3] = 28;
data[4] = 10;
data[5] = 5;
// -->
</SCRIPT>


→ グラフ表示用のTABLEをJavaScriptで記述する
 
続いて、配列の値を基にグラフを作成していきます。今回はTABLEを利用して配置するので、document.writeでTABLEタグを書き出します。TABLEタグの属性は、線幅1ピクセルで外枠のみ（border=1 frame=box rules=none）、セル内の余白を5ピクセル（cellpadding=5）に指定しておきます。なお、TRタグとTDタグは、以降の繰り返し（for文）の中で書き出すので、ここで記述する必要はありません。
<SCRIPT language="JavaScript">
<!--
　　：
　　：
（手順1の配列宣言）
　　：
　　：
document.write("<TABLE border=1 frame=box rules=none cellpadding=5>");
document.write("</TABLE>");
// -->
</SCRIPT>


→ JavaScriptでグラフを表示する
 
あとは、TBALE内に見出しと棒グラフを書き出すだけでグラフが完成します。これは、for文で繰り返し処理を行うことにより実現します。変数「i」の繰り返しは各項目の処理、変数「j」の繰り返しは数値（data[i]）に応じて■の文字を表示する処理となります。今回は、見出しの文字列（midashi[i]）を右揃えでセル内に配置しました。また、ウィンドウサイズによって■が折り返して表示されないように、棒グラフを表示するセルにはnowrap属性を追加しています。そのほか、■の右側に数値（data[i]）を書き出す処理も行っています。
<SCRIPT language="JavaScript">
<!--
　　：
　　：
（手順1の配列宣言）
　　：
　　：
document.write("<TABLE border=1 frame=box rules=none cellpadding=5>");
for(i = 1; i <= max ; i++){
document.write("<TR><TD align=right>");
document.write(midashi[i]);
document.write("</TD><TD nowrap>");
for(j = 1; j <= data[i]; j++){
document.write("<FONT color=red>■</FONT>");
}
document.write("　"+data[i]);
document.write("</TD></TR>");
}
document.write("</TABLE>");
// -->
</SCRIPT>

今回の紹介したテクニックでも棒グラフを作成できますが、あまり見た目の良いグラフにならないことは否めません。そこで、来週はもっとグラフィカルな棒グラフを作成する方法を紹介します。ご期待ください。


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��